let currentSong = 0,
    maxSong,
    playing = false,
    pause = false

let elements = {
    images: document.getElementsByClassName('album-art'),
    songs: document.getElementsByClassName('song'),
    artists: document.getElementsByClassName('artist'),
    play: document.getElementById('play-button'),
    previous: document.getElementById('previous-button'),
    next: document.getElementById('next-button'),
    currentSong: document.getElementById('current-song'),
    slider: document.getElementById('slider'),
    audio: document.querySelector('#audio-player'),
    musicDom: null,
    allSongs: [
        'images/2.mp3',
        'images/1.mp3',
        'images/4.mp3'
    ],
    index: 0,

    init: function (themeIndex) {
        // this.musicDom = document.createElement('audio')
        audio = new Audio()
        audio.src = this.allSongs[this.index]
        document.body.appendChild(audio)
    },

    //添加一首音乐
    add: function (src) {
        this.allSongs.push(src)
    },

    //根据数组下标决定播放哪一首歌
    musicPlay: function () {
        // this.musicDom.src = this.allSongs[this.index]
        audio.src = this.allSongs[this.index]
        audio.play()
    },

    stop: function () {
        this.musicDom.pause()
    },

    forward: function () {
        let len = this.allSongs.length
        //判断是否是有效的索引
        if (this.index + 1 >= 0 && this.index < len) {
            this.index++
            //如果已经是最后一首，就跳到第一首
            if (this.index == len) {
                this.index = 0
            }
            this.musicPlay()
        }
    },

    //上一首
    backward: function () {
        let len = this.allSongs.length
        //判断是否是有效的索引
        if (this.index + 1 >= 0 && this.index < len) {
            //如果已经是第一首，就跳到最后一首
            if (this.index == 0) {
                this.index = len
            }
            this.index--
            this.musicPlay()
        }
    },
}

function next() {
    elements.forward()
    updateDOM('remove')
    currentSong++
    if (currentSong > maxSong) {
        currentSong = 0
    }
    updateDOM('add')
    elements.play.classList.add('pause')
}

function previous() {
    elements.backward()
    updateDOM('remove')
    currentSong--
    if (currentSong < 0) {
        currentSong = maxSong
    }
    updateDOM('add')
    elements.play.classList.add('pause')
}

function updateDOM(action) {
    elements.currentSong.innerHTML = currentSong + 1
    if (action === 'add') {
        elements.images[currentSong].classList.add('active')
        elements.songs[currentSong].classList.add('active')
        elements.artists[currentSong].classList.add('active')
    } else {
        elements.images[currentSong].classList.remove('active')
        elements.songs[currentSong].classList.remove('active')
        elements.artists[currentSong].classList.remove('active')
    }
}

function playPause() {
    if (audio.paused) {
        audio.play()
        pause = false
        elements.play.classList.add('pause')
    } else {
        pause = true
        // elements.stop()
        audio.pause()
        elements.play.classList.remove('pause')
    }
    playing = !playing
}

function main() {
    elements.init()
    elements.images[currentSong].classList.toggle('active')
    elements.songs[currentSong].classList.toggle('active')
    elements.artists[currentSong].classList.toggle('active')
    maxSong = elements.images.length - 1
    elements.next.addEventListener('click', function () {
        next()
    })
    elements.previous.addEventListener('click', function () {
        previous()
    })
    elements.play.addEventListener('click', function () {
        playPause()
    })
}

main()

audio.ontimeupdate = function () {
    let currentTime = Math.floor(this.currentTime)
    let min = parseInt(currentTime / 60)
    let sec = parseInt(currentTime % 60)
    let time = (min < 10 ? '0' + min : min) + ':' + (sec < 10 ? '0' + sec : sec)
    let total = this.duration
    let length =
        (parseInt(total / 60) < 10
            ? '0' + parseInt(total / 60)
            : parseInt(total / 60)) +
        ':' +
        (parseInt(total % 60) < 10
            ? '0' + parseInt(total % 60)
            : parseInt(total % 60))
    document.querySelector('.time').innerHTML = time
    document.querySelector('.elapsed').style.width =
        Math.floor((currentTime / total) * 100) + '%'
    document.querySelector('.duration').innerHTML = length
}
